<template>
    <div 
        class="network"
        ref="network"
    >
        <div class="online" v-if="flag">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="10 8 25 25">
                <g id="组_16" data-name="组 16">
                    <path ref="onLine" id="path2" class="cls-1" d="M21,21.38a3.5,3.5,0,0,0-2.77,1.36.5.5,0,0,0,.09.7.51.51,0,0,0,.31.11.49.49,0,0,0,.39-.2,2.5,2.5,0,0,1,3.9-.07.5.5,0,1,0,.76-.65A3.51,3.51,0,0,0,21,21.38Z"/>
                    <path ref="onLine" id="path3" class="cls-1" d="M21,18.64a6.24,6.24,0,0,0-4.6,2,.49.49,0,0,0,0,.7.49.49,0,0,0,.71,0A5.26,5.26,0,0,1,21,19.64a5.18,5.18,0,0,1,3.79,1.63.5.5,0,0,0,.71,0,.49.49,0,0,0,0-.7A6.16,6.16,0,0,0,21,18.64Z"/>
                    <path ref="onLine" id="path4" class="cls-1" d="M27.27,18.8a8.65,8.65,0,0,0-12.54,0,.49.49,0,0,0,0,.7.5.5,0,0,0,.71,0,7.64,7.64,0,0,1,11.08,0,.51.51,0,0,0,.36.15.47.47,0,0,0,.35-.14A.49.49,0,0,0,27.27,18.8Z"/>
                    <path ref="onLine" id="path1" class="cls-1" d="M21.1,24.14A.88.88,0,1,0,22,25,.88.88,0,0,0,21.1,24.14Z"/> 
                </g>
            </svg>
        </div>
        <p v-if="flag" ref="networkSpeed" class="network-speed">{{localNetwork.speed}}KB/s</p>

        <!-- <i v-if="flag" ref="onLine" class="iconfont iconzhongzhi_wangluolianjie"></i> -->
        <i v-if="!flag" ref="offLine" class="iconfont iconzhongzhi_wangluocuowu"></i>

    </div>
</template>
<script>
// 网路状态大屏状态呈现

import { mapMutations} from 'vuex'
import axios from 'axios'
import { envServer as env} from 'anov-core'
export default {
    data(){
        return {
            flag: this.$store.state.cmlpanel.network
        }
    },
    props: {
        networkStatus: {
            type: Object
        }
    },
    mounted(){
       
        
        this.$nextTick
        (() => {
            this.init();
        })
    },
    computed: {
        ...env.mapState(['localNetwork'])
    },
    watch: {
        localNetwork: {
            handler: function(v){
                v.connected ? this.flag = true : this.flag = false
                this.$nextTick( () => {
                    if(v.connected ){
                        this.setStatus(v)
                    }
                })
            }
        }
    },
    methods:{
        init(){
            let network = this.$refs.network;
            Object.assign(network.style, this.networkStatus ? this.networkStatus.style : {})
            app.envServer.addEventListener('onLine', () => {
                this.flag = true
                this.$refs.network.style.width = '100px'
                // this.getTimeNetwork();
            })
            app.envServer.addEventListener('offLine', () => {
                this.flag = false
                this.$refs.network.style.width = '30px'
            })
        },
        getTimeNetwork(){
            let oldTime = (new Date()).getTime(), newTime = 0, time = 0, _this = this;
            if(this.flag){
                setInterval(function(){
                    time = window.performance.timing.connectEnd - window.performance.timing.connectStart;
                    _this.setStatus(time)
                },5000)
            }
            
            // let url = 'https://bird.ioliu.cn/v1/?url='
            // axios.get('https://google.cn')
            // .then(res => {
            //     newTime = (new Date()).getTime();
            //     time = newTime - oldTime;
            //     console.dir(time)
            //     this.setStatus(time)
            // })
            // .catch(err => {
            //     console.dir(err)
            // })

        },
        setStatus(v){
            if(v.level  ==  4){
                document.getElementById('path3').classList.add('online')
                document.getElementById('path2').classList.add('online')
                document.getElementById('path1').classList.add('online')
                document.getElementById('path4').classList.add('online')
            }else if(v.level  ==  3){
                document.getElementById('path3').classList.add('online')
                document.getElementById('path2').classList.add('online')
                document.getElementById('path1').classList.add('online')
            }else if(v.level  ==  2){
                document.getElementById('path2').classList.add('online', 'bad')
                document.getElementById('path1').classList.add('online', 'bad')
                this.$refs.networkSpeed.classList.add('bad')
            }else {
                document.getElementById('path4').classList.add('online bad')
                this.$refs.networkSpeed.classList.add('bad')

            }
        }
    }
    
}
</script>
<style lang="scss" scoped>
.network {
    text-align: center;
    line-height:32px;
    overflow: hidden;
    .iconfont{
        font-size:20px;
    }
    .iconzhongzhi_wangluocuowu {
        color: #ff106e;
    }
}
.online {
    float: left;
    width: 32px;
    height: 32px;
}
.cls-1 {
    fill:rgba(193, 255, 251, 0.1);
}
.cls-1.online {
    // fill: #48c0fd;
    fill: rgba(193, 255, 251, 0.6);
}
.cls-1.online.bad {
    // fill: #48c0fd;
    fill: rgba(255, 181, 87, 1);
}
.network-speed {
    float: left;
    height: 32px;
    font-size: 12px;
    line-height: 32px;
}
.network-speed.bad {
    color: rgba(255, 181, 87, 1);
}
</style>

